*{
    margin:0;
    padding:0;
    list-style:none;
}
html,body, .wra{
    width:100%;
    height:100%;
    background:blanchedalmond;
}
.wra{
    display: flex;
    justify-content: center;
    align-items: center;
}
.wra ul{
    width:80%;
    height:80%;
    /* border:1px solid black; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
.wra ul li{
    width:16%;
    height:100%;
    background:#666;
    border-radius:50px;
    transition: width 0.5s linear,height 0.5s linear 0.5s;
}

/*点击了图片时图片的动画开始*/
.wra-active ul li{
    transition: height 0.5s linear ,width 0.5s linear 0.5s;
}
.wra-active ul li.active{
    width:100%;
}
.wra-active ul li:not(.active){
    width:0;
    height:0;
}
.wra-active ul li .title{
    opacity:0;
}
/*点击图片动画结束*/

.wra ul li .con{
    position: relative;
    width:100%;
    height:100%; 
    transition: transform 0.5s linear;
}
.wra ul li:nth-of-type(2) .con{
    transition-delay: 0.1s
}
.wra ul li:nth-of-type(3) .con{
    transition-delay: 0.2s
}
.wra ul li:nth-of-type(4) .con{
    transition-delay: 0.3s
}
.wra ul li:nth-of-type(5) .con{
    transition-delay: 0.4s
}
.wra ul li:nth-of-type(6) .con{
    transition-delay: 0.5s
}

/*添加背景图片*/
.wra ul li .con .bg{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    border-radius:50px;
    opacity:0.7;
    transition:opacity 0.2s linear;
}
.wra ul li:hover .bg{
    opacity: 1;
}
.wra ul li:nth-of-type(1) .con .bg{
    background-image: url(img/1.jpg)
}
.wra ul li:nth-of-type(2) .con .bg{
    background-image: url(img/2.jpg)
}
.wra ul li:nth-of-type(3) .con .bg{
    background-image: url(img/3.jpg)
}
.wra ul li:nth-of-type(4) .con .bg{
    background-image: url(img/4.jpg)
}
.wra ul li:nth-of-type(5) .con .bg{
    background-image: url(img/5.jpg)
}
.wra ul li:nth-of-type(6) .con .bg{
    background-image: url(img/6.jpg)
}
.wra ul li .con .title{
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    font-size:25px;
    font-weight:bolder;
    color:#fff;
    transition:font-size 0.2s linear,opacity 0.2s linear 0.5s;
}
.wra ul li:hover .con .title{
    font-size:30px;
    
}
.init ul li .con{
    transform:translateY(100%);
}
.header{
    opacity: 0;
    position: absolute;
    width:100%;
    height:30px;
    top:50px;
    /* border:1px solid black; */
}
.wra ul li.active .header{
    opacity: 1;
    transition: opacity 0.5s linear 1s;
}
.wra ul li .header .title2{
    font-size:30px;
    font-weight:bold;
    color:#fff;
    position: absolute;
    left:50px;
}
.wra ul li .header .close{
    position: absolute;
    right:50px;
    width:30px;
    height:30px;
    /* border:1px solid black; */
    transition: transform 0.5s linear 1s;
}
.wra ul li.active .header .close{
    transform: rotate(360deg);
    transition: transform 0.5s linear 1s;
}
.close::before,
.close::after{
    position: absolute;
    top:50%;
    content:"";
    display: block;
    width:30px;
    height:4px;
    background-color:#fff;
}
.close::before{
    transform: rotate(45deg);
}
.close::after{
    transform: rotate(-45deg)
}
